<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<script>
  // 一、父关系 ：一定会找到一个容器，父节点 和父元素 是一样的；
  var box2 = document.querySelector(".box2");
  // // 1.父节点
  // // document.onclick = function(){
  // //     console.log( box2.parentNode)
  // // }
  // // 2.父元素
  // document.onclick  = function(){
  //     console.log(box2.parentElement.parentElement.parentElement);
  // }

  // 二、兄弟关系 ；
  // 1.上一个兄弟元素 previousElementSibling
  // document.onclick = function(){
  //   console.log(  box2.previousElementSibling);
  // }
  // 2.上一个兄弟节点
  // document.onclick = function(){
  //   console.log(box2.previousSibling);
  // }

  // 3.下一个兄弟元素 nextElementSibling
  // document.onclick = function(){
  //     console.log(box2.nextElementSibling)
  // }

  // 4.下一个兄弟节点 nextSibling
  document.onclick = function () {
    console.log(box2.nextSibling);
  };

  // 总结 ： 1.父级元素和节点是一样的 可以混用
  // 2.上一个兄弟节点或者元素  3.下一个兄弟节点或者元素；
</script>
